import React from "react";
import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";

export const DelModal = ({
  modalVisible,
  setModalVisible,
  bucketDelFun,
}: any) => {
  return (
    <Modal
      animationType="fade"
      presentationStyle="overFullScreen"
      transparent={true}
      visible={modalVisible}
      onClose={() => {
        setModalVisible(false);
      }}
    >
      <View style={[styles3.centeredView2]}>
        <View style={styles3.modalView}>
          <View style={styles3.topBox}>
            <Text
              style={[
                styles3.topBoxTitle,
                { paddingTop: 31, paddingBottom: 37 },
              ]}
            >
              是否确认删除该条记录？
            </Text>
          </View>

          <View style={styles3.bottomBtns}>
            <TouchableOpacity
              style={[styles3.bottomBtnItem, styles3.bottomBtnItem2]}
              onPress={() => {
                setModalVisible(false);
              }}
            >
              <Text style={[styles3.textStyle, { color: "rgba(0,0,0,.64)" }]}>
                取消
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles3.bottomBtnItem}
              onPress={() => {
                bucketDelFun();
              }}
            >
              <Text style={styles3.textStyle}>确认</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles3 = StyleSheet.create({
  centeredView2: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,.6)",
    padding: 20,
  },
  modalView: {
    // margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    overflow: "hidden",
    alignItems: "center",
    shadowColor: "#000",
    justifyContent: "center",
    width: "100%",
    // width:290)
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center",
  },
  bottomBtns: {
    flexDirection: "row",
    width: "100%",
  },
  bottomBtnItem: {
    width: "50%",
    alignItems: "center",
    justifyContent: "center",
    // height: 48,
    // backgroundColor:'red',
    borderTopWidth: 1,
    borderColor: "rgba(0,0,0,.1)",
    borderStyle: "solid",
    paddingVertical: 16,
  },
  bottomBtnItem2: {
    borderRightWidth: 1,
    borderColor: "rgba(0,0,0,.1)",
    borderStyle: "solid",
  },
  textStyle: {
    fontSize: 16,
    color: "#4371B1",
  },
  topBox: {
    padding: 14,
    paddingTop: 22,
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    // backgroundColor:'red'
  },
  topBoxTitle: {
    color: "#4371B1",
    fontSize: 18,
    fontWeight: "500",
    justifyContent: "center",
    alignContent: "center",
  },
  tags: {
    width: "100%",
    textAlign: "left",
    backgroundColor: "#F5F5F5",
    marginTop: 12,
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
    overflow: "hidden",
    fontSize: 14,
    color: "#000000",
    marginBottom: 12,
  },
  inputBox: {
    flexDirection: "row",
    width: "100%",
    alignItems: "center",
    marginTop: 16,
    marginBottom: 32,
  },
  inputItem: {
    width: "50%",
  },
  inputText: {
    fontSize: 12,
    color: "#000000",
    marginBottom: 4,
  },
  input: {
    // width: 110,
    flex: 1,
    height: 40,
    borderColor: "rgba(0,0,0,.2)",
    borderWidth: 1,
    borderRadius: 4,
    paddingHorizontal: 10,
  },
});
